<template>
  <view class="page">
    <Header :title="'生词本'"> </Header>
    <view class="main_container">
      <view class="main_content">
        <view class="content">
          <view class="tabs">
            <view
              class="tabs_item"
              v-for="(item, index) in typeList"
              :key="index"
              :class="{
                active: currentIndex === index,
              }"
              @click="handleChangeType(index)"
            >
              <text>{{ item.name }}</text>
            </view>
          </view>
          <view class="box">
            <view class="list">
              <u-swipe-action
                class="swipe"
                :index="index"
                v-for="(item, index) in wordList"
                :key="item.id"
                @click="handleClickSwipe"
                :options="options"
                bg-color="rgba(0,0,0,0)"
                btn-width="112"
              >
                <view
                  class="item"
                  @click="
                    switchPage(
                      '/pages/word/wordPractice?type=dcscb&id=' + item.id
                    )
                  "
                >
                  <view class="item_left">
                    <view class="item_word"> {{ item.word }} </view>
                    <view class="item_phonetic">
                      /
                      <text v-for="(ele, i) in item.segList" :key="i">
                        {{ ele.ipaUs }}
                      </text>
                      /
                    </view>
                  </view>
                  <view class="item_right">
                    <view class="item_interpretation">
                      {{ item.wordParaphrase }}
                    </view>
                  </view>
                </view>
              </u-swipe-action>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-popup
      class="custom-popup"
      v-model="show1"
      :zoom="false"
      mode="center"
      width="1010rpx"
      height="388rpx"
      :mask-close-able="false"
      :mask-custom-style="{
        background: 'rgba(0, 0, 0, 0.5)',
      }"
    >
      <view class="mask1">
        <view class="mask1_title"> 是否删除选中单词? </view>
        <view class="mask1_btn">
          <view class="mask1_text active" @click="submit()">确定</view>
          <view class="mask1_text" @click="show1 = false">取消</view>
        </view>
      </view>
    </u-popup>
    <u-popup
      class="custom-popup"
      v-model="show2"
      :zoom="false"
      mode="center"
      width="800rpx"
      height="265rpx"
      :mask-close-able="false"
      :mask-custom-style="{
        background: 'rgba(0, 0, 0, 0.5)',
      }"
    >
      <view class="mask2">
        <view class="mask2_text"> 单词学习后方可移除 </view>
        <view class="mask2_btn" @click="show2 = false">
          <text>关闭</text>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { getScbList, deleteSc } from "@/api/sync";
export default {
  components: {},
  data() {
    return {
      typeList: [
        {
          name: "单元生词本",
          type: "dcscb",
        },
        {
          name: "阅读生词本",
          type: "ydscb",
        },
      ],
      currentIndex: 0,
      wordList: [],
      currentWordIndex: 0,
      options: [
        {
          text: "移除单词",
          style: {
            color: "#A7A7A7",
            fontSize: "28rpx",
            display: "flex",
            justifyContent: "center",
            alignItems: "flex-end",
            paddingBottom: "10rpx",
            background:
              "#f5f5f5 url('https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/newwordsBook/remove.png') 40rpx 10rpx/ 32rpx 32rpx  no-repeat",
          },
        },
      ],
      show1: false,
      show2: false,
    };
  },
  onLoad() {
    this.getData();
  },
  methods: {
    getData() {
      getScbList(this.typeList[this.currentIndex].type).then((res) => {
        this.wordList = res.data;
      });
    },
    handleChangeType(index) {
      if (this.currentIndex === index) return;
      this.currentIndex = index;
      this.getData();
    },
    handleClickSwipe(index, i) {
      this.currentWordIndex = index;
      if (i === 0) {
        this.show1 = true;
      }
    },
    submit() {
      this.show1 = false;
      let params = {
        chapterId: this.wordList[this.currentWordIndex].chapterId,
        type: this.typeList[this.currentIndex].type,
        wordId: this.wordList[this.currentWordIndex].id,
      };
      deleteSc(params).then((res) => {
        if (res.data) {
          this.getData();
        } else {
          this.show2 = true;
        }
      });
    },
    switchPage(url) {
      uni.navigateTo({
        url: url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./newwordsBook";
</style>
